<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <!--1.引包-->
    <script src="js/vue.js"></script>
    <style>
        /*默认是红色的*/
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }

        .active {
            background: green;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <h1>{{1+1}}</h1>
        <h2>{{isTrue}}</h2>
        <h2>{{str.split('').reverse().join('')}}</h2>
    </div>
    <hr>
    <div id="app1">
        <h2>{{msg}}</h2>
        <!-- v-text是纯文本，不识别html标签 -->
        <h2 v-text="msg"></h2>
        <h2 v-text="msg2"></h2>
        <!-- v-html识别html标签 -->
        <h2 v-html="msg2"></h2>

        <!-- html页面中没有这个标签了 -->
        <h2 v-if="isShow">if你真好看</h2>
        <h2 v-else>else你在说谎</h2>

        <!--相当于display:none/block-->
        <h2 v-show="isShow">show显示</h2>
        <h2 v-show="!isShow">!show隐藏</h2>

        <!--样式绑定,v-bind:style  可简写，不加v-bind -->
        <!--事件绑定v-on:click 或者@click-->
        <div class="box" :class="{'active':isGreen}" @click="clickHandler">点我</div>
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定样式</div>
        <div v-bind:style="styleObject">通过对象绑定样式，不带{}</div>

        <!--for in 循环-->
        <!--集合-->
        <ul>
            <!-- 值，索引 -->
            <li v-for="(item,index) in menuLists" :key="item.id">
                <span v-text="item.id"></span>
                <span>{{item.name}}</span>
                <span>{{item.price}}</span>
                <span>{{index}}</span>
            </li>
        </ul>
        <!--对象-->
        <ul>
            <!-- 值，键 -->
            <li v-for="(value,key) in person">
                {{key}}==={{value}}
            </li>
        </ul>



    </div>

    <script>
        //2.创建实例化对象
        var vm = new Vue({
            el: '#app', //目的地
            data: {
                //数据属性
                //既可以是一个对象 也可以是一个函数
                msg: '黄瓜',
                isTrue: 1 == 1,
                str: 'helloVue'
            },
            //如果template中定义了内容，那么优先加载template，如果没有定义内容那么加载的是#app的模板
            template: ''
        });
        console.log(vm);

        //创建实例化对象
        new Vue({
            el: '#app1',
            data: function () {
                return {
                    msg: '指令系统',
                    msg2: '<h1 style="color:red">朱玲</h1>',
                    isShow: false,
                    isActive: true,
                    isGreen: true,
                    activeColor: 'red',
                    fontSize: 30,
                    menuLists: [ //集合
                        {
                            id: 1,
                            name: '画师',
                            price: 70
                        },
                        {
                            id: 2,
                            name: '肉',
                            price: 30
                        },
                        {
                            id: 3,
                            name: '菜',
                            price: 90
                        },
                    ],
                    person: { //对象
                        name: '张三',
                        age: '40',
                        eat: '大盘鸡',
                    },
                    styleObject: {
                        color: 'red',
                        fontSize: '13px'
                    }
                }
            },
            template: '',
            methods: {
                clickHandler() {
                    this.isGreen = !this.isGreen;
                }
            },


        });
    </script>
</body>

</html>